<template>
  <div class="full auto-height-container bg-none! border-none! p0! relative">
    <div class="full flex relative">
      <div class="w100% h100% overflow-auto flex flex-wrap flex-content-start">
        <div class="w-full flex flex-wrap">
          <div class="flex w60% h-full p12px home-item h460px">
            <div class="w-full p18px bg-#fff h100% rd-10px">
              <!-- 供应商数据 -->
              <div class="flex w-full h-full">
                <supperlier-data />
              </div>
            </div>
          </div>
          <div class="flex w40% h-full p12px home-item h460px">
            <div class="w-full p18px bg-#fff h100% rd-10px">
              <!-- 业务数据 -->
              <div class="flex w-full h-full">
                <business-data />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// import backlog from './components/backlog.vue'
import businessData from './components/businessData.vue'
import supperlierData from './components/supperlierData.vue'
import { useUserStore } from '/@/store/modules/user'

const userStore = useUserStore()

// 父组件控制的状态
const dialogVisible = ref(false)
// 打开弹窗方法
const showDialog = () => {
  dialogVisible.value = true
}
const currentDate = ref(new Date())
const goFeedback = () => {
  window.open('https://alj0eviqgs.feishu.cn/share/base/form/shrcniJ5BWMRCX42Zjwsjm9iuy8')
}
const getTime = () => {
  const hour = new Date().getHours()
  const thisTime = hour < 8 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 18 ? '下午好' : '晚上好'
  return thisTime
}
</script>
<style lang="scss" scoped>
.feedback {
  transition: all 0.2s ease-in;
}
.feedback-text {
  color: #0c34ff;
  text-decoration: underline;
}
.show {
  width: 98px;
  padding: 10px 4px 10px 10px;
  display: flex;
  justify-content: flex-end;
}
.hide {
  width: 30px;
  padding: 10px 4px 10px 0;
}

.auto-height-container {
  background: none !important;
}
.home-title {
  font-weight: 900 !important;
  font-size: 18px;
  display: flex;
  align-items: center;
}
:deep() {
  .home-title {
    font-weight: 900 !important;
    font-size: 18px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 1260px) {
  .top-item1 {
    width: 100% !important;
  }
  .top-item2 {
    width: 100% !important;
  }
  .top-box {
    flex-wrap: wrap;
  }
}
@media (max-width: 1500px) {
  .home-item {
    width: 100% !important;
  }
}
</style>
<style lang="scss">
.el-progress-bar__outer {
  background-color: #fff !important;
}
</style>
